import React, { Component } from "react";
import { connect } from "react-redux"
import { increment_action, incrementAsync_action } from "../../redux/count_reducer_action"

class CountUI extends Component {
  increment = () => {
    const { value } = this.selectNumber;
    this.props.incrementAc(value*1)
  };
  incrementAsync = () => {
    const { value } = this.selectNumber;
    this.props.incrementAsync(value*1,500)
  };
  render() {
    return (
      <div>
        <h1>当前求和为: {this.props.count}</h1>
        <select ref={(c) => (this.selectNumber = c)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
        &nbsp;
        <button onClick={this.increment}>+</button> &nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    );
  }
}

// 优化一：
// const mapStateToProps = (state) => ({ count: state })
// const mapDispatchToProps = (dispatch) => ({
//   incrementAc: (data) => dispatch(increment_action(data)),
//   incrementAsync: (data, time) => dispatch(incrementAsync_action(data, time))
// })
// export default connect(mapStateToProps, mapDispatchToProps)(CountUI)

// 优化二： 当connect 第二个参数传入一个对象的时候，假如key 的值是一个 action, react-redux 会自动的去调用 dispatch 方法

export default connect(
    (state) => ({ count: state }), 
    {
      incrementAc: increment_action,
      incrementAsync: incrementAsync_action 
    }
  )(CountUI)